<template>
	<view class="bg-fff radius20 p24 flex row-between pr">
		<view v-for="(item,index) in releaseStatus" :key="index" class="flex w25p row-center relative">
			<view class="line absolute top44" v-if="index"></view>
			<view class="text-center ">
				<image :src="item.img" class="h88 w88" mode=""></image>
				<view class="fs28 color-00111d" :class="{'color-zs fw-w':index===length}">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "schedule",
		props: {
			length: {
				default: ''
			}
		},
		data() {
			return {
				releaseStatus: [{
						name: '发起需求',
						img: '/static/img/demo/fqxq.png'
					},
					{
						name: '在线支付',
						img: '/static/img/demo/bj.png'
					},
					{
						name: '服务中',
						img: '/static/img/demo/fwz.png'
					},
					{
						name: '服务完成',
						img: '/static/img/demo/wgpj.png'
					},
				],
			};
		}
	}
</script>

<style lang="scss">
	.line {
		width: 70rpx;
		height: 0rpx;
		border: 1rpx dashed #72dbde;
		left: -35rpx;
	}
</style>